<template>
  <div class="about">
    <h2>{{count}}</h2>
    <hr>
    <h2>{{state1}}</h2>
    <button @click="increment">更新</button>
  </div>
</template>

<script lang="ts">
import {ref} from "vue"

export default {
  setup() {
    // 包含响应式数据的引用对象
    const count = ref(0) // count是一个引用对象, 内部包含存储数据的value属性
    console.log(count, count.value)
    //定义reactive的响应式对象数据
    const state1 = ref({
      msg: '哈哈',
      user: {
        name: '小甜甜'
      },
      cars: ['奔驰','宝马','奥迪']
    })
    // 更新响应式数据的函数
    const increment = () => {
      count.value++
      state1.value.msg+='==='
    }
    return { // 对象中的属性和方法, 模板可以直接访问
      count,
      state1,
      increment
    }
  }
}
</script>
